<template>
	<view class="tab">
		<view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">未完成</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">待审核</view>
			<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">已完成</view>
		</view>
		<view class="list" v-show="Inv == 0">
			<view class="item">
				<view class="top">
					<text>润华商厦/1单元/1001</text>
					<text>未完成</text>
				</view>
				<view class="content">
					<view class="title">
						<view class="h1">报修标题：</view>
						<view class="text-overflow">下水道堵塞</view>
					</view>
					<view class="img">
						<image src="../../static/test.jpg" mode="aspectFit"></image>
					</view>
					<view class="time">
						<text>报修时间：</text>
						<text>2019-12-12</text>
					</view>
				</view>
				<view class="button" @click="unfinished">
					<text>查看详情</text>
				</view>
			</view>
			<view class="item">
				<view class="top">
					<text>润华商厦/1单元/1001</text>
					<text>未完成</text>
				</view>
				<view class="content">
					<view class="title">
						<view class="h1">报修标题：</view>
						<view class="text-overflow">下水道堵塞就给大家个房间爱国福建安徽广发计划的风格兼爱非攻哈刚放假爱国</view>
					</view>
					<view class="img">
						<image src="../../static/test.jpg" mode="aspectFit"></image>
					</view>
					<view class="time">
						<text>报修时间：</text>
						<text>2019-12-12</text>
					</view>
				</view>
				<view class="button" @click="unfinished">
					<text>查看详情</text>
				</view>
			</view>
		</view>
		<view class="list" v-show="Inv == 1">
			<view class="item">
				<view class="top">
					<text>润华商厦/1单元/1001</text>
					<text>待审核</text>
				</view>
				<view class="content">
					<view class="title">
						<view class="h1">报修标题：</view>
						<view class="text-overflow">下水道堵塞</view>
					</view>
					<view class="img">
						<image src="../../static/test.jpg" mode="aspectFit"></image>
					</view>
					<view class="time">
						<text>报修时间：</text>
						<text>2019-12-12</text>
					</view>
				</view>
				<view class="bottom">
					<text>维修时间：</text>
					<text>2019-12-12</text>
				</view>
				<view class="button" @click="check">
					<text>查看详情</text>
				</view>
			</view>
			<view class="item">
				<view class="top">
					<text>润华商厦/1单元/1001</text>
					<text>待审核</text>
				</view>
				<view class="content">
					<view class="title">
						<view class="h1">报修标题：</view>
						<view class="text-overflow">下水道堵塞就给大家个房间爱国福建安徽广发计划的风格兼爱非攻哈刚放假爱国</view>
					</view>
					<view class="img">
						<image src="../../static/test.jpg" mode="aspectFit"></image>
					</view>
					<view class="time">
						<text>报修时间：</text>
						<text>2019-12-12</text>
					</view>
				</view>
				<view class="bottom">
					<text>维修时间：</text>
					<text>2019-12-12</text>
				</view>
				<view class="button" @click="check">
					<text>查看详情</text>
				</view>
			</view>
		</view>
		<view class="list" v-show="Inv == 2">
			<view class="item">
				<view class="top">
					<text>润华商厦/1单元/1001</text>
					<text>已完成</text>
				</view>
				<view class="content">
					<view class="title">
						<view class="h1">报修标题：</view>
						<view class="text-overflow">下水道堵塞</view>
					</view>
					<view class="img">
						<image src="../../static/test.jpg" mode="aspectFit"></image>
					</view>
					<view class="time">
						<text>完成时间：</text>
						<text>2019-12-12</text>
					</view>
				</view>
				<view class="button" @click="finished">
					<text>查看详情</text>
				</view>
			</view>
			<view class="item">
				<view class="top">
					<text>润华商厦/1单元/1001</text>
					<text>已完成</text>
				</view>
				<view class="content">
					<view class="title">
						<view class="h1">报修标题：</view>
						<view class="text-overflow">下水道堵塞就给大家个房间爱国福建安徽广发计划的风格兼爱非攻哈刚放假爱国</view>
					</view>
					<view class="img">
						<image src="../../static/test.jpg" mode="aspectFit"></image>
					</view>
					<view class="time">
						<text>完成时间：</text>
						<text>2019-12-12</text>
					</view>
				</view>
				<view class="button" @click="finished">
					<text>查看详情</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onPullDownRefresh() {
			console.log('onPullDownRefresh', new Date())
		},
		data() {
			return {
				Inv:0
			}
		},
		methods: {
			changeTab(Inv) {
				that.navIdx = Inv;
			},
			unfinished () {
				setTimeout(() => {
					dd.navigateTo({
						url: '../repair-unfinished/repair-unfinished'
					});
				},10);
			},
			finished () {
				setTimeout(() => {
					dd.navigateTo({
						url: '../repair-finished/repair-finished'
					});
				},10);
			},
			check () {
				setTimeout(() => {
					dd.navigateTo({
						url: '../repair-check/repair-check'
					});
				},10);
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
	}

	view {
		font-size: 28rpx;
		line-height: inherit
	}
	.inv-h-w {
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
	}

	.inv-h {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #BEBEBE;
		height: 100upx;
		line-height: 100upx;
	}

	.inv-h-se {
		color: #5BA7FF;
		border-bottom: 4upx solid #5BA7FF;
	}
	.list {
		margin: 20rpx;
	}
	.list .item {
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 8px;
		position: relative;
	}
	.list .item .top {
		border-bottom: 1px #efeff4 solid;
		display: flex;
		justify-content: space-between;
		padding-bottom: 10rpx;
	}
	.content {
		padding-top: 20rpx;
	}
	.content .title {
		padding-bottom: 10rpx;
		display: flex;
		justify-content: flex-start;
	}
	.content .img image{
		width: 200rpx;
		height: 200rpx;
	}
	.button {
		position: absolute;
		bottom: 30rpx;
		right: 20rpx;
		color: #007AFF;
	}
	.bottom {
		margin-top: 10rpx;
		border-top: 1px #efeff4 dashed;
		padding-top: 20rpx;
	}
	.h1 {
		width: 22%;
	}
	.text-overflow {
		width: 78%;
		height: 50rpx;
		line-height: 50rpx;
		vertical-align: middle;
		/*如下为超出隐藏显示为省略号的核心代码*/
		overflow: hidden;    /* 内容超出宽度时隐藏超出部分的内容 */
		text-overflow: ellipsis;    /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
		word-break: keep-all;    /* 不换行 */
		white-space: nowrap;    /* 不换行 */
	}
</style>
